<template>
  <div class="head">
    <h1 class="title">任务看板</h1>
    <span class="iconfont icon-fanhui" @click="$router.push('/equipment/homepage')">返回管理页面</span>
  </div>
  <div class="cards">
    <TaskCard class="red" @reload="init">报修</TaskCard>
    <TaskCard class="cyan" :dataList="ludeTask" @reload="init">润滑</TaskCard>
    <TaskCard class="cyan" :dataList="maintainTask" @reload="init">保养</TaskCard>
    <TaskCard class="cyan" :dataList="checkTask" @reload="init">点检</TaskCard>
    <TaskCard class="cyan" @reload="init">维修</TaskCard>
  </div>

</template>

<script setup>
import TaskCard from './components/TaskCard.vue';
import { getTask } from '@/api/equipment/tactics';
// import router from '@/router';
import { ref } from 'vue';
const ludeTask = ref({})
const checkTask = ref({})
const maintainTask = ref({})
async function init() {
  await getTask().then(res => {
    console.log(res);
    ludeTask.value = res.data.data.find(item => item.type === 'lude')
    checkTask.value = res.data.data.find(item => item.type === 'check')
    maintainTask.value = res.data.data.find(item => item.type === 'maintain')
  })
}
init()
// TODO 发起维修和维修
</script>
<style scoped lang="less">
.head {
  width: 100%;
  position: relative;

  .title {
    width: 150px;
    margin: 24px auto;
    text-align: center
  }

  .iconfont {
    cursor: pointer;
    position: absolute;
    left: calc(50% + 150px);
    top: 16px;
    font-size: 16px;
    color: #00BAAD;
  }
}

.cards {
  display: flex;
  justify-content: space-around;
  margin: 16px 32px;
}
</style>
<!-- <style>
.red {
  .header {
    background-color: red;
  }
}

.cyan {
  .header {
    background-color: #00BAAD;
  }
}
</style> -->